<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--//application/x-www-form-urlencoded 序列化表单-->
<form action="" method="post"  enctype="multipart/form-data">
    姓名:<input type="text" name="username" id=""/><br/>
    密码:<input type="password" name="password" id=""/><br/>
    头像:<input type="file" name="headpic" id=""/><br/>
    <input type="submit" value="注册"/>
    <input type="button" value="提交1" id="btn"/>
</form>
<script>

    var oBtn = document.getElementById('btn');
    oBtn.onclick = function(){

        var xhr = new XMLHttpRequest();
        xhr.open('POST','/post1',true);
//        发送序列化表单,默认的类型
//        xhr.setRequestHeader('Content-Type','application/json');//发json数据
//        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');//发查询字符串
//        xhr.setRequestHeader('Content-Type','multipart/form-data');//上传文件
        xhr.onreadystatechange = function(){
            if(xhr.readyState==4&&xhr.status==200){
                //:练习:把上传后的图片显示出来
                //1.在服务器段把,files的的headerPic里的path读出来,复制到images目录下
                //2.把此图片的路径返回浏览器端
                //3.浏览器端购建一个img元素,追加到body上,并指定img src属性为图片路径
                //4.服务器端可以接收客户端发出的请求图片的请求,返回图片给客户端
            }
        }

        var oForm = document.getElementsByTagName('form')[0];
        var formData = new FormData();
        formData.append('username',document.querySelector('input[name=username]').value);
        formData.append('password',document.querySelector('input[name=password]').value);
        var headerPic = document.querySelector('input[name=headpic]');
        formData.append('headerPic',headerPic.files[0]);

        xhr.send(formData);
    }
</script>
</body>
</html>